<template>
	<view class="claim-order-detail">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="养殖管理">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<image mode="aspectFill" lazy-load class="common-bg breed abs"
			src="https://lbqny.migugu.com/admin/farm/bg-breed.png"></image>

		<view @tap.stop="goDetail(item)" class="order-item flex-center fill-base mg-big pd-lg radius-16 box-shadow"
			:class="[{'mt-md':index!=0}]" v-for="(item,index) in list.data" :key="index">
			<image mode="aspectFill" lazy-load class="avatar big radius-24" :src="item.cover"></image>
			<view class="flex-1 ml-lg">
				<view class="f-title c-title text-bold ellipsis" style="max-width: 468rpx;"> {{item.title}}
				</view>
				<view class="f-caption c-caption mt-md mb-md ellipsis" style="max-width: 468rpx;"> {{item.sub_title}}
				</view>
				<view class="flex-between">
					<view class="f-title c-warning"> ¥{{item.price}} </view>
					<view v-if="showNumber" class="add-remove-item flex-warp">
						<block v-if="item.car_num>0">
							<i @tap.stop="toAddCar(index, -1)" class="iconfont icon-remove-square"></i>
							<view class="number-text flex-center">{{item.car_num}}</view>
						</block>
						<i @tap.stop="toAddCar(index,1)" class="iconfont icon-add-square"
							:style="{color:primaryColor}"></i>
					</view>
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>

		<view class="space-footer"></view>
		<view class="space-max-footer"></view>
		<view class="footer-btn fix pl-lg pr-lg fill-base" v-if="list.count > 0 && showNumber">
			<image mode="aspectFill" lazy-load class="cart-img abs" src="/static/image/farm/breed-cart.png"></image>
			<view class="cart-msg flex-center c-base f-icontext abs" :style="{width: list.count<10 ? '30rpx' : '50rpx'}"
				v-if="list.count">
				{{list.count < 100 ? list.count : '99+'}}
			</view>
			<view class="footer-item flex-between">
				<view class="flex-y-baseline">总计:<view class="c-warning ml-sm">¥{{list.total_price}}</view>
				</view>
				<view @tap.stop="toOrder" class="order-btn flex-center f-title c-base text-bold radius-20"
					:style="{background:primaryColor}">立即下单
				</view>
			</view>
			<view class="space-safe"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				scrollTop: 0,
				detail: {},
				number: 1,
				param: {
					page: 1,
				},
				list: {
					data: [],
					count: 0,
					total_price: 0
				},
				loading: true,
				lockTap: false,
				showNumber: true,
			}
		},
		onLoad(options) {
			this.options = options
			this.showNumber = this.options.is_select !== "1"
			this.updateOrderItem({
				key: 'haveOperItem',
				val: false
			})
			this.initIndex()
		},
		onUnload() {
			if (!this.haveOperItem) return
			this.$util.back()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			haveOperItem: state => state.order.haveOperItem,
		}),
		methods: {
			...mapMutations(['updateOrderItem']),
			async initIndex() {
				this.getList()
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex()
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.$util.showLoading()
				this.param.page = 1
				this.list.data = []
				this.getList()
			},
			async getList() {
				let {
					list: oldList,
					param
				} = this
				let {
					farmer_id
				} = this.options
				param.farmer_id = farmer_id
				let newList = await this.$api.claim.breedList(param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			// 添加购物车
			async toAddCar(index, goods_num) {
				let {
					id: goods_id,
					car_id = 0
				} = this.list.data[index]
				await this.toUpdateCar(goods_id, goods_num, car_id, index)
			},
			// 修改购物车数量
			async toUpdateCar(goods_id, goods_num, car_id, index) {
				if (this.lockTap) return;
				this.lockTap = true;
				let methodModel = goods_num > 0 ? 'addCar' : 'delCar'
				let {
					farmer_id
				} = this.options
				let param = goods_num > 0 ? {
					farmer_id,
					goods_id,
					goods_num,
					type: 1
				} : {
					id: car_id,
					goods_num: 1
				}
				try {
					let curCarId = await this.$api.claim[methodModel](param)
					this.lockTap = false
					let {
						car_num,
					} = this.list.data[index]
					let num = car_num + goods_num
					let cur_car_id = car_id ? num == 0 ? '' : car_id : curCarId
					this.list.data[index].car_id = cur_car_id
					this.list.data[index].car_num = num
					this.getCount()
				} catch (e) {
					this.lockTap = false
				}
			},
			async getCount() {
				let {
					farmer_id
				} = this.options
				let {
					count,
					total_price
				} = await this.$api.claim.breedList({
					farmer_id
				});
				this.list.count = count
				this.list.total_price = total_price
			},
			toOrder() {
				let {
					id: claim_order_id,
					farmer_id
				} = this.options
				let {
					total_price: pay_price
				} = this.list
				let param = {
					claim_order_id,
					pay_price,
					page_type: 'breed'
				}
				this.updateOrderItem({
					key: 'orderInfo',
					val: param
				})
				let url = `/mine/pages/pay`
				this.$util.goUrl({
					url
				})
			},

			goDetail(item) {
				if (this.showNumber) return
				this.$util.getPage(-1).breedingModel = item
				this.$util.goUrl({
					url: 1,
					openType: 'navigateBack'
				})

			}
		}
	}
</script>


<style lang="scss">
	.claim-order-detail {

		.footer-btn {
			bottom: 0;

			.cart-img {
				width: 108rpx;
				height: 108rpx;
				top: -8rpx;
			}

			.cart-msg {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				border-radius: 15rpx 15rpx 15rpx 0;
				background: #f12c20;
				top: -8rpx;
				left: 108rpx;
			}

			.footer-item {
				height: 114rpx;
				margin-left: 180rpx;

				.order-btn {
					width: 226rpx;
					height: 88rpx;
				}
			}
		}
	}
</style>